<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ok{
			    color:green;
			}
			.error{
			    color:red;
			}
		</style>
	</head>
	<body>
		名字：<input type="text" id="name" onblur="checkName()"/>
		<span id="nameMsg">5-10位字母、数字、下划线</span>
		<span id="nameExistMsg"></span>
		<br/>
		邮箱：<input type="text" id="email" onblur="checkEmail()"/>
		<span id="emailMsg">必须符合邮箱的格式</span>
		
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			function checkName() {
				console.log("checkName")
				var name = $("#name").val();
				
				// 通过正则表达式验证格式是不是合法，在前端就可以完成
				var reg = /^[a-zA-Z0-9_]{5,9}$/;
				
				if(name.match(reg)) {
					/* class="ok" */
					$("#nameMsg").attr("class", "ok");
					// 如果想加多个使用addClass
					//$("#nameMsg").addClass("ok");
				} else {
					$("#nameMsg").attr("class", "error");
					// 格式不合法就不需要发送到后台
					return;
				}
				
				// 如果格式合法，通过ajax发送到后台验证数据库里面是不是有重名的名字
				$.post(
					"${pageContext.request.contextPath}/student?method=checkName",
					{"name" : name},
					function(data) {
						//{"isExist": isExist}
						console.log(data);
						if(data.isExist) {// true代表这个用户已经存在
							$("#nameExistMsg").html("该用户名已经存在");
							$("#nameExistMsg").css("color", "red");
						} else {
							$("#nameExistMsg").html("该用户名可以使用");
							$("#nameExistMsg").css("color", "green");
						}
					},
					"json"
				);
			}
			
			function checkEmail() {
				console.log("checkEmail")
				var name = document.getElementById("email").value;
				var span = document.getElementById("emailMsg");
				// situ@qq.com
				var reg = /^[a-zA-Z0-8_]{3,5}@[a-zA-Z0-8_]+\.[a-zA-Z0-8_]+$/;
				
				if(name.match(reg)) {
					/* class="ok" */
					span.className = "ok";
				} else {
					span.className = "error";
				}
			}
		</script>
	</body>
</html>
